零散学习日记1
博主比较懒也比较菜,学习日记这种东西更新绝对不会太频繁!
Day01 2020.9.6 学习日记1
role属性
- role属性的作用是告诉Accesibility类应用(如屏幕阅读器等)当前元素的作用,可以增强文本的可读性和语义化
- 在Html5元素内,标签本身就是有语义的,因此role可以作为可选属性使用,但类似于Bootstrap中都很重视类似的属性和声明,目的是为了兼容老版浏览器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27<!--role属性的使用-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="container">
<!--标明页面容器-->
<header role="banner">
<nav role="navigation"><a href="http://www.baidu.com">百度</a> </nav>
<!--标明该处是导航-->
</header>
<main role="main">
<!--标明页面主体-->
<article>text</article>
<article>example</article>
</main>
<div class="sidebar">
<aside role ="complementary"></aside>
<aside role ="complementary"></aside>
</div>
<footer role="contentinfo"></footer>
</div>
</body>
</html>定义图标的方法
- 图标:在网页导航栏中显示的网页标签中文字前方的图标
1
2
3
4<!--首先准备一张16*16px的图标(网页专用)-->
<!--在HTML5文档中输入如下代码即可-->
<link rel="icon" href="/favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>流的定义
- 流表示图表,照片,图形,插图,代码片段等独立的内容,在HTML5之前没有专门实现这个目的的元素,一些开发人员使用没有语义的div元素来表示
- HTML5使用figure和figcaption引入流,其中figcaption表示流的标题,流的标题不是必须的,但如果包含它,就必须是figure内嵌的第一个或者最后一个元素
1
2
3<figure>
<figcaption>XXXXXXXX</figcaption>
</figure>picture标签及响应式效果的实现
picture标签属性:
- srcset:必需,设置图片文件路径,如“srcset=”img/minpic.png””,或者是用逗号分隔的用像素密度描述的图片路径,如“srcset=”img/minpic.png,img/maxpic.png 2x””
- media :设置媒体查询,如media=”(min-width:320px)”
- sizes:设置宽度,如sizes=”100vw”,或是媒体查询宽度,如sizes=”(min-width:320px) 100vw”,可用逗号分隔形成媒体查询宽度列表
- type:设置MIME类型,如type=”image/webp”或者type=”image/vnd.ms-photo”
1
2
3
4
5
6<picture>
<source media="(min-width:650px)" srcset="images/kitten-large.png">
<source media="(min-width:456px)" srcset="images/kitten-medium.png">
<!--img标签用于不支持picture元素的浏览器-->
<img src="images/kitten-small.png" alt="a cute kitten" id="picimg">
</picture>
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 而立的小破栈!
评论